<template>
    <div class="platformContainer">
        <el-card shadow="always" class="header_card">
            <el-form :inline="true" :model="formInline" label-width="1.125rem">
                <el-form-item label="系统模块">
                    <el-input v-model="formInline.user" placeholder="请输入系统模块"></el-input>
                </el-form-item>
                <el-form-item label="操作人员">
                    <el-input v-model="formInline.user" placeholder="请输入操作人员"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="formInline.region" placeholder="请输入操作类型">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="formInline.region" placeholder="操作状态">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作时间" v-if="changed">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="开始日期" 
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="结束日期" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <div class="btn">
                        <el-button type="primary" @click="onSubmit">搜索</el-button>
                        <el-button @click="onSubmit">重置</el-button>
                        <el-button @click="change">更多<i
                                    :class="[changed ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
        <div class="content">
            <el-descriptions title="操作日志" :colon="false">
                <template slot="extra">
                    <el-button icon="el-icon-refresh" type="text" class="refresh" size="mini"></el-button>
                </template>
            </el-descriptions>
            <div class="table" style="width: 99%;">
                <el-table :data="tableData" :header-cell-style="headerRowStyle2" class="tag6_table" height="7rem">
                    <el-table-column prop="name" label="日志编号" align="center">
                    </el-table-column>
                    <el-table-column prop="state" label="系统模块" align="center">
                    </el-table-column>
                    <el-table-column prop="state" label="操作类型" align="center">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.activationLock === '1'">设备相关</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operate" label="操作人员" align="center">
                    </el-table-column>
                    <el-table-column prop="operate" label="主机" align="center">
                    </el-table-column>
                    <el-table-column prop="operate" label="操作状态" align="center">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.activationLock === '1'">成功</el-tag>
                            <el-tag type="danger" v-if="scope.row.activationLock === '0'">失败</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operate" label="操作日期" align="center">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            changed: false,
            formInline: {},
            headerRowStyle2: {
                'backgroundColor': '#f8f8f9',
                'color': 'black'
            },
            tableData: [
                {
                    date: 1,
                    state: '0',
                    role: '0',
                    eliminatedStatus: '1',
                    activationLock: '1',
                    deviceStatus: '1',
                    serverStatus: '1',
                    abmStatus: '1'
                },
                {
                    date: 2,
                    state: '1',
                    role: '1',
                    eliminatedStatus: '1',
                    activationLock: '1',
                    deviceStatus: '1',
                    serverStatus: '1',
                    abmStatus: '1'
                }
            ]
        }
    },
    methods: {
        change() {
            //更换图标
            this.changed = !this.changed
            //切换是否显示
            this.createTimeShow = !this.createTimeShow
        },
    },
    // 使用
    mounted() {
        this.$nextTick(() => {
        });
    },
}
</script>
<style scoped>
.refresh {
    width: .625rem;
    font-size: .2125rem !important;
}
.refresh:hover{
    background-color: #ebf1ff;
}
::v-deep .refresh>.el-icon-refresh:before {
    font-size: .225rem !important;
}

.platformContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header_card {
    margin-bottom: 20px;
}

::v-deep .el-form-item {
    margin-bottom: .125rem !important;
}

.content {
    padding: .25rem;
}

::v-deep .el-descriptions__title {
    margin-right: .25rem;
}

.icon {
    margin-right: .125rem;
}

::v-deep .el-date-editor .el-range-separator {
    width: 7% !important;
}

.btn .el-button {
    margin-right: .125rem;
    margin-left: 0 !important;
}
</style>